<template>
    <div class="dingdan-box">
        <el-row>
            <el-col :span="24" class="dingdan-box1" style="border-bottom: 2px solid #E4E4E4">
                <div class="grid-content bg-purple-dark" style="float: left">
                    课程订单列表
                </div>
                <div style="float: right;">
                    <el-button size="mini" style="background-color: #FFFFFF" class="small-button" plain @click="returnPage"><i class="el-icon-arrow-left"></i>返回</el-button>
                    <el-button size="mini" style="background-color: #FFFFFF" class="small-button" @click="shuaxin"><i class="el-icon-refresh-right"></i>刷新</el-button>
                </div>
            </el-col>
        </el-row>
        <div class="dingdan-box2">
            <router-link to="/CourseDingdan"><el-button size="mini" style="background-color: #FFFFFF" class="small-button">全部订单(<span>{{dingdan.alldingdan}}</span>)</el-button></router-link>
            <router-link to="/CourseDfukuan"><el-button size="mini" style="background-color: #FFFFFF" class="small-button">待付款(<span style="color: red;">{{dingdan.fukuan}}</span>)</el-button></router-link>
            <router-link to="/CourseYwancheng"><el-button size="mini" style="background-color: #FFFFFF" class="small-button">已完成(<span style="color: red;">{{dingdan.wancheng}}</span>)</el-button></router-link>
            <router-link to="/CourseYquxiao"><el-button size="mini" style="background-color: #1ABC9C;color: white" class="small-button">已取消(<span style="color: red;">{{dingdan.quxiao}}</span>)</el-button></router-link>
        </div>
        <el-row>
            <el-col :span="24" class="dingdan-box1" style="border-bottom: 2px solid #E4E4E4">
                <div class="grid-content bg-purple-dark" style="float: left;margin-left: 20px">
                    <i class="el-icon-search">筛选条件</i>
                </div>
                <div style="float: right;">
                    <el-button type="text" size="mini" @click="duihua" style="background-color: #FFFFFF;color: #606266;margin-right: 20px;padding: 10px" class="small-button">高级检索</el-button>
                    <el-dialog
                            title="高级检索"
                            :visible.sync="centerDialogVisible"
                            width="60%"
                            center>
                        <div class="dialogDiv">
                                <el-form :inline="true" :model="formInline" class="demo-form-inline" @submit.native.prevent>
                                    <el-form-item label="订单编号：" style="margin:0px 80px 20px 0px;line-height: 30px" :label-width="formLabelWidth">
                                        <el-input v-model="formInline.user" placeholder="订单编号"></el-input>
                                    </el-form-item>
                                    <el-form-item label="用户账号：" style="line-height: 30px" :label-width="formLabelWidth">
                                        <el-input v-model="formInline.region" placeholder="用户账号" style="width: 220px;"></el-input>
                                    </el-form-item>
                                    <el-form-item label="支付方式：" style="line-height: 30px;margin:0px 80px 20px 0px;" :label-width="formLabelWidth">
                                        <el-select placeholder="请选择" class="select-dingdan" v-model="value" style="width: 207px;">
                                            <el-option
                                                    v-for="item in options"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="提交时间：" style="line-height: 30px" :label-width="formLabelWidth">
                                        <el-date-picker value-format="yyyy-MM-dd" placeholder="选择时间" v-model="formInline.date"></el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="订单状态：" style="line-height: 30px;margin:0px 80px 20px 0px;" :label-width="formLabelWidth">
                                        <el-select placeholder="请选择" class="select-dingdan" v-model="value3" style="width: 207px;">
                                            <el-option
                                                    v-for="item in dingdanstatus"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="订单来源：" style="line-height: 30px;margin-left:0px;" :label-width="formLabelWidth">
                                        <el-select placeholder="请选择" class="select-dingdan" v-model="value2" style="width: 220px;">
                                            <el-option
                                                    v-for="item in dingdanly"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-form>
                        </div>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="centerDialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="mohucha">确 定</el-button>
                          </span>
                    </el-dialog>
                </div>
            </el-col>
            <el-col :span="24" class="dingdan-box1" style="background-color: white;height: 40px;margin: 10px 0px 20px 0px">
                <el-form :inline="true" :model="formInline" class="demo-form-inline" @submit.native.prevent>
                    <el-form-item label="订单编号：" style="margin-left: 40px;line-height: 30px">
                        <el-input v-model="formInline.user" placeholder="订单编号" @keyup.enter.native="mohucha"></el-input>
                    </el-form-item>
                    <el-form-item label="用户账号：" style="line-height: 30px">
                        <el-input v-model="formInline.region" placeholder="用户账号" @keyup.enter.native="mohucha"></el-input>
                    </el-form-item>
                    <el-form-item label="支付方式：" style="line-height: 30px">
                        <el-select placeholder="请选择" class="select-dingdan" v-model="value" style="width: 210px">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="提交时间：" style="line-height: 30px">
                        <el-date-picker value-format="yyyy-MM-dd" placeholder="选择时间" v-model="formInline.date" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-col :span="24" class="dingdan-box1" style="border-bottom: 2px solid #E4E4E4">
            <div class="grid-content bg-purple-dark" style="float: left;margin-left: 20px">
                <i class="el-icon-s-grid">数据列表</i>
            </div>
        </el-col>
        <template>
            <el-table
                    :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                    border
                    style="width: 100%"
                    :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                    :cell-style="cellStyle"
                    ref="multipleTable"
                    @selection-change="selsChange"
                    >
                <el-table-column
                        align="center"
                        type="selection"
                        width="80">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="shopId"
                        label="订单编号"
                        width="200">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="createDate"
                        label="提交时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="account"
                        label="用户账号"
                        width="150">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="logisticsFee"
                        label="订单金额"
                        sortable
                        :formatter="jinge"
                        width="120">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="orderPaymentChannel"
                        label="支付方式"
                        :formatter="zhifu"
                        width="100">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="orderSource"
                        label="订单来源"
                        :formatter="dingdanlaiyuan"
                        width="120">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="orderStatus"
                        label="订单状态"
                        :formatter="dingdanStatus"
                        width="120">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="orderType"
                        label="类型"
                        :formatter="orderType"
                        width="110"
                        >
                </el-table-column>
                <el-table-column
                        align="center"
                        fixed="right"
                        label="操作"
                        width="150">
                    <template slot-scope="scope">
                        <router-link to="/CkDingdan" style="text-decoration: none;color: #66B1FF"><el-button @click="handleClick(scope.row)" type="text" size="small"> 查看订单</el-button></router-link>
                        <router-link to="/GzShopDingdan" style="text-decoration: none;color: #66B1FF"><el-button type="text" size="small" v-if="scope.row.orderType!=2">跟踪订单</el-button></router-link>
                    </template>
                </el-table-column>
            </el-table>
            <div style="float: left;margin: 5px 0px 0px -14px">
                <el-button size="mini" style="background-color: #FFFFFF" class="small-button" @click="removeBatch()">删除</el-button>
            </div>
            <div style="float: right;margin-right: 450px">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[1,5,10]"
                        :page-size="pagesize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="tableData.length">
                </el-pagination>
            </div>
        </template>
    </div>
</template>

<script>
    export default {
        //哪个页面要刷新就引入这个
        inject:['reload'],
        data(){
            return{
                centerDialogVisible: false,//对话框是否打开
                formInline: {
                    /*
                    * 此方法对应模糊查询
                    * */
                    user: '',
                    region: '',
                    date:'',
                },
                options: [{
                    value: '2',
                    label: '微信'
                },{
                    value: '3',
                    label: '余额'
                }],
                dingdanstatus: [{
                    value: '2',
                    label: '待付款'
                },{
                    value: '4',
                    label: '待发货'
                },{
                    value: '5',
                    label: '已发货'
                },{
                    value: '6',
                    label: '已签收'
                },{
                    value: '10',
                    label: '取消交易'
                }],
                dingdanly: [{
                    value: '2',
                    label: '小程序'
                },{
                    value: '3',
                    label: 'App'
                }],
                value: '',//这个值是form表单的select下拉框
                value2:'',//这个是订单来源
                value3:10,//这个是订单状态
                tableData: [],//渲染表格数据
                dingdan:"",//获取各个支付状态的数量
                currentPage: 1,//当前是哪一页
                currentIndex:'',//暂时没用
                pagesize: 1,//每页多少条
                formLabelWidth:'120px',
                sels: [],//被选中的记录数据-----对应“批量删除”传的参数值
            }
        },
        methods:{
            handleClick(row) {
                /*
                * 此方法获取点击订单Id并且跳转到查看订单
                * */
                this.$store.commit('shopDingdan',row.orderId)
            },
            async dingdanAll(){
                /*
                * 此方法用来获取订单的各个状态的数量
                * */
                const {data:res} = await this.$http.post("/postGetDingdanAll",{
                    "orderType":2
                })
                this.dingdan = res;
            },
            async dingdanTableAll(){
                //此方法用来获取全部订单状态的数据然后渲染到表格中
                const {data:res} = await this.$http.post("/postGetDingdanTableAll",{
                    "orderType":2,
                    "orderStatus":10
                })
                this.tableData = res;
            },
            handleSizeChange(val) {
                this.pagesize = val;
            },
            handleCurrentChange(val) {
                this.currentPage = val;
            },
            zhifu(row,index){
                //此方法用来格式化支付方式
                if(row.orderPaymentChannel == 2){
                    row.logisticsFee
                    return '微信支付';
                }else if(row.orderPaymentChannel == 3){
                    return '余额支付';
                }else {
                    return '未支付';
                }
            },
            dingdanlaiyuan(row,index){
                if(row.orderSource == 2){
                    return '小程序';
                }else if(row.orderSource == 3){
                    return 'App';
                }
            },
            jinge(row,index){
              return '￥'+row.logisticsFee;
            },
            dingdanStatus(row,index){
                if (row.orderStatus == 2){
                    return '待付款';
                } else if(row.orderStatus == 4){
                    return '待发货'
                }else if(row.orderStatus == 5){
                    return '已发货'
                }else if(row.orderStatus == 6){
                    return '已完成'
                }else if(row.orderStatus == 10){
                    return '已取消'
                }
            },
            orderType(row,index){
                if (row.orderType == 2){
                    return '课程';
                }else if(row.orderType == 3){
                    return '商品';
                }
            },
            shuaxin(){
                //刷新页面的方法
                this.reload();
            },
            duihua(){
              //此方法用来清空对话框里表单的内容以及打开对话框
                this.centerDialogVisible = true
                this.formInline.user = '';
                this.formInline.region = '';
                this.formInline.date = '';
                this.value = '';
                this.value2 = '';
                this.value3 = '';
            },
            async mohucha(){
                this.centerDialogVisible = false
                var user = this.formInline.user;
                var region = this.formInline.region;
                var date = this.formInline.date;
                var value = this.value;
                var laiyuan = this.value2;
                var zhuangtai = this.value3;
                const {data:res} = await this.$http.post("/postGetDingdanMohucha",{
                        "orderNo":user,
                        "account":region,
                        "createDate":date,
                        "orderPaymentChannel":value,
                        "orderStatus":zhuangtai,
                        "orderSource":laiyuan,
                        "orderType":2
                })
                this.tableData = res;
            },
            cellStyle(row,column,rowIndex,columnIndex){
                if (row.column.label == '类型' && row.row.orderType == 3) {
                    return 'color:#1ABC9C';
                }
            },
            returnPage(){
                //此方法用来返回上一个页面
                if (window.history.length <= 1) {
                    this.$router.push({ path: "/system/storageManagement" });
                    return false;
                } else {
                    this.$router.go(-1);
                }
            },
            selsChange(sels) {
                this.sels = sels
                //遍历选中的数组
                for (let tableData of this.sels) {
                    this.disabled = false
                }
                let length = this.sels.length
            },
            removeBatch() {
                var ids = this.sels.map(item => item.shopId).join()
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(async () => {
                        const {data:res} = await this.$http.post("/GetShopDelete",{
                            "orderNo":ids
                        })
                        if (res != false) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'

                            })
                            this.reload();
                        }
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
            }
        },
        created() {
            this.dingdanAll();
            this.dingdanTableAll();
        },
    }
</script>

<style scoped>
    .dingdan-box{
        width: 1340px;
    }
    .dingdan-box1{
        color: #666666;
        line-height: 50px;
        height: 50px;
        background-color: #F3F3F3;
    }
    .small-button{
        margin: 0px 15px 0px 15px;
    }
    .dingdan-box2{
        color: #666666;
        line-height: 45px;
        margin-top: 10px;
        margin-bottom: 10px;
        width: 100%;
        height: 45px;
    }
    .select-dingdan{
        width:120px;
    }
    .dialogDiv{
        width: 790px;
        height: 40vh;
        overflow: hidden;
    }
</style>